<template>
	<view class="body">
		<!-- 个人信息 -->
		<view class="info">
			<view class="info-item">
				<text>头像</text>
				<button plain="true" open-type="chooseAvatar" @chooseavatar="changeImg">
					<image :src="avatarUrl" mode=""></image>
				</button>
			</view>
			<view class="info-item">
				<text>昵称</text>
				<input class="nickinput" type="nickname" :value="nickName" @change="getnickname" />
				<!-- <text>{{nickName}}</text> -->
			</view>
			<view class="info-item">
				<text>联系方式</text>
				<view class="WeChat">
					<view class="edit" v-if="edit">
						<input class="edit-input" focus="true" type="text" v-if="edit" :value="contact"
							@input="getInput" />
						<uni-icons class="close-incons" type="close" size="18" v-if="showClearIcon"
							@click="clearIcon"></uni-icons>
					</view>
					<!-- 显示输入的联系方式 -->
					<view class="phone" v-else>{{_contact}}</view>
					<view class="edit-status">
						<uni-icons v-if="!edit" type="compose" size="25" @click="toEdit"></uni-icons>
						<text v-else @click="closeEdit">取消</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 保存数据 -->
		<button class="btn-save" v-if="edit" @click="saveInput">保存修改</button>
	</view>

</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue';
	import {
		http
	} from '../../API/request.js';
	const avatarUrl = ref('')
	const nickName = ref('')
	const edit = ref(false)
	const contact = ref('')
	// 缓存中的
	const _contact = ref('')
	const showClearIcon = ref(false)
	const userInfo = ref('')
	// 点击事件

	// 获取用户昵称
	const getnickname = (e) => {
		if (nickName.value !== e.detail.value) {
			const openid = uni.getStorageSync('openid')
			nickName.value = e.detail.value
			const newavatarurl = uni.getStorageSync('userinfo')
			newavatarurl.nickname = e.detail.value
			uni.setStorageSync('userinfo', newavatarurl)
			http.post('/updatenickname', {
				openid: openid,
				nickname: e.detail.value
			})
		}
	}
	// 获取用户头像
	const changeImg = (e) => {
		const openid = uni.getStorageSync('openid')
		avatarUrl.value = e.detail.avatarUrl
		const newavatarurl = uni.getStorageSync('userinfo')
		newavatarurl.avatarurl = e.detail.avatarUrl
		uni.setStorageSync('userinfo', newavatarurl)
		http.post('/updateimg', {
			openid: openid,
			avatarurl: e.detail.avatarUrl
		})
	}

	const toEdit = () => {
		edit.value = !edit.value
		contact.value = _contact.value
	}
	// 清空input内容
	const clearIcon = () => {
		contact.value = ' '
		showClearIcon.value = false
	}
	// 获取Input内容
	const getInput = (e) => {
		contact.value = e.detail.value
		// 判断是否有输入
		if (e.detail.value.length > 0) {
			showClearIcon.value = true
		} else {
			showClearIcon.value = false
		}
	}
	// 取消输入
	const closeEdit = () => {
		edit.value = !edit.value
		contact.value = _contact.value
	}
	// 保存input数据
	const saveInput = () => {
		const openid = uni.getStorageSync('openid')
		if (contact.value.trim().length > 0) {
			userInfo.value = uni.getStorageSync('userinfo')
			// 更新缓存数据
			userInfo.value.contact = contact.value
			uni.setStorageSync('userinfo', userInfo.value)
			edit.value = !edit.value
			_contact.value = contact.value
			http.post('/updatecontact', {
				openid: openid,
				contact: contact.value
			}).then((res) => {
				const {
					data
				} = res
				if (data === 'success') {
					uni.showToast({
						title: '保存成功',
						icon: 'none'
					})
				}
			})
		}

	}

	onLoad(() => {
		// 获取头像、昵称、号码
		const userdata = uni.getStorageSync('userinfo')
		avatarUrl.value = userdata.avatarurl
		nickName.value = userdata.nickname
		_contact.value = userdata.contact
	})
</script>

<style lang="less">
	.body {
		width: 100vw;
		height: 100vh;
		background-color: #fff;

		.info {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 30rpx;

			.info-item {
				display: flex;
				height: 170rpx;
				justify-content: space-between;
				width: 90%;
				align-items: center;
				border-bottom: 2px solid #d3d3d3;

				.nickinput {
					width: 20%;
				}

				button {
					right: 40rpx;
					position: absolute;
					width: 128rpx !important;
					height: 128rpx !important;
					border-radius: 50%;
					border: none;
				}

				image {
					right: 30rpx;
					position: relative;
					border-radius: 50%;
					width: 130rpx;
					height: 130rpx;
				}

				.WeChat {
					display: flex;

					.edit {
						display: flex;
						align-items: center;

						height: 60rpx;
						width: 150px;
						border: 2rpx solid #f3f3f3;

						.edit-input {}

						.close-incons {
							z-index: 999;
						}

					}

					.phone {
						margin-right: 80rpx;
					}

					.edit-status {
						display: flex;
						align-items: center;
					}
				}
			}
		}

		.btn-save {
			width: 80%;
			background-color: skyblue;
			color: #f3f3f3;
		}
	}
</style>